<!--
 * @Author: xujianhua
 * @Date: 2021-04-01 17:06:04
 * @LastEditTime: 2021-04-06 09:13:11
 * @Description: file content
 * @FilePath: \vue3-element-admin\src\views\layoutpages\leisure\Game.vue
-->
<template>
  <div>
    <el-row :gutter="50"
            justify="space-between">
      <el-col :span="16">
        <div class="head">
          <div class="wf-left">
            <div class="titsle">
              <span>最新7天用户数量</span>
              <span class="fnt">{{count}}</span>
            </div>
            <div class="chart"
                 id="chart"
                 style="width: 1000px;"></div>
          </div>
          <div class="wrapper">
            <div class="ritht">
              <div class="total-share">
                <span class="title">总任务：</span>
                <span class="number">{{total_task.total_nums}}</span>
              </div>
              <div id="head-right"></div>
            </div>
          </div>
        </div>

        <div class="dth33">
          <el-row :gutter="22">
            <el-col :span="8">
              <div class="k1">
                <div class="d1">
                  <div class="img1">
                    <img src="~@/assets/home/k1-img.png"
                         class="k1-im">
                  </div>
                  <div class="k1-str">
                    未接任务
                  </div>
                  <div class="k1-num">
                    {{missData.total_nums}}
                  </div>
                </div>
                <div class="jd"
                     v-for="(item,index) in missData.datas"
                     :key="index">
                  <div class="tit"
                       v-if="item.task_type == 1">实践经历</div>
                  <div class="tit"
                       v-if="item.task_type == 2">基础知识</div>
                  <div class="tit"
                       v-if="item.task_type == 3">知识扩展</div>
                  <div class="jdt">
                    <div class="dth"
                         v-if="item.task_type == 1">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#7FA8FA" />
                    </div>
                    <div class="dth"
                         v-if="item.task_type == 2">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#8685E8" />
                    </div>
                    <div class="dth"
                         v-if="item.task_type == 3">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#FB8B79" />
                    </div>
                    <div class="num1">{{item.nums}}</div>
                  </div>
                </div>
                <!-- <div class="jd">
                  <div class="tit">基础知识</div>
                  <div class="jdt">
                    <div class="dth">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#8685E8" />
                    </div>
                    <div class="num2">20</div>
                  </div>
                </div>
                <div class="jd">
                  <div class="tit">实践经历</div>
                  <div class="jdt">
                    <div class="dth">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#FB8B79" />
                    </div>
                    <div class="num3">20</div>
                  </div>
                </div> -->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="k2">
                <div class="d1">
                  <div class="img1">
                    <img src="~@/assets/home/k2-img.png"
                         class="k1-im">
                  </div>
                  <div class="k1-str">
                    进行中
                  </div>
                  <div class="k1-num">
                    {{progressData.total_nums}}
                  </div>
                </div>
                <div class="jd"
                     v-for="(item,index) in progressData.datas"
                     :key="index">
                  <div class="tit"
                       v-if="item.task_type == 1">实践经历</div>
                  <div class="tit"
                       v-if="item.task_type == 2">基础知识</div>
                  <div class="tit"
                       v-if="item.task_type == 3">知识扩展</div>
                  <div class="jdt">
                    <div class="dth"
                         v-if="item.task_type == 1">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#7FA8FA" />
                    </div>
                    <div class="dth"
                         v-if="item.task_type == 2">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#8685E8" />
                    </div>
                    <div class="dth"
                         v-if="item.task_type == 3">
                      <el-progress :percentage="20"
                                   :format="format"
                                   :show-text="false"
                                   color="#FB8B79" />
                    </div>
                    <div class="num1">{{item.nums}}</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="k3">
                <div class="b1">
                  <div class="d1">
                    <div class="img1">
                      <img src="~@/assets/home/k2-img.png"
                           class="k1-im">
                    </div>
                    <div class="k1-str">
                      审核中
                    </div>
                    <div class="k1-num">
                      {{checkData.total_nums}}
                    </div>
                  </div>
                  <div class="tx">
                    <div class="tx-str1"
                         v-for="(item,index) in checkData.datas"
                         :key="index">
                      <span v-if="item.task_type==1">
                        实践经历
                      </span>
                      <span v-if="item.task_type==2">
                        基础知识
                      </span>
                      <span v-if="item.task_type==3">
                        知识扩展
                      </span>
                      <span class="ma-num">{{item.nums}}</span>
                    </div>
                  </div>
                </div>
                <div class="remind"
                     v-if="isremind == 0 ">
                  <img src="~@/assets/home/tixing.png"
                       class="re-img">
                  <div class="r-1">提醒审核</div>
                </div>
                <div class="remind1"
                     v-if="isremind == 1 "
                     @click="RemindChange">
                  <img src="~@/assets/home/tixing.png"
                       class="re-img">
                  <div class="r-1">提醒审核</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <Right :list="state.messageList"
               :total="state.total"
               @current="current"
               type="1"></Right>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { computed, onMounted, reactive, ref } from "vue";
import { getHomeMess, CountUsers, GetTotalTask, RemindCheck } from "@/request/api";

import * as echarts from "echarts";
import Right from "@/components/common/right";
const state = reactive({
  tabPosition: "day",
  notasjnum: 0,
  data1: [
    {
      name: "实践经历",
      value: 20,
      label: {
        fontSize: "10px"
      }
    },
    {
      name: "基础知识",
      value: 6,
      label: {
        fontSize: "10px"
      }
    },
    {
      name: "知识扩展",
      value: 9,
      label: {
        fontSize: "10px"
      }
    }
  ],
  messageList: [
  ],
  total: 0,
  pageSize: 5,
  page: 1
});
export default {
  data: () => ({
    description: "总控制台"
  }),
  components: {
    Right
  },
  setup (props, { emit }) {
    let count = ref("")
    let countData = reactive([])
    let dayData = reactive([])
    let checkData = ref([])
    let missData = ref([])
    let progressData = ref([])
    let isremind = ref([])
    let total_task = ref([])
    const token = "6ae482fd89406a4e95e221db0258631e"


    //统计七天用户数量
    const countusers = () => {
      CountUsers(token).then(res => {
        if (res.ret == 200) {
          console.log("请求成功")
          count.value = res.data.count
          dayData.value = res.data.labels
          countData.value = res.data.datas
          // console.log(dayData.value, countData.value)
        } else {
        }
      })
    }


    //首页任务统计
    const gettotaltask = () => {
      GetTotalTask(token).then(res => {
        if (res.ret == 200) {
          isremind.value = res.data.is_remind
          checkData.value = res.data.check_task
          missData.value = res.data.missed_task
          progressData.value = res.data.progress_task
          total_task.value = res.data.total_task
          let data = {}
          let arr =  res.data.total_task
          if(typeof(arr)!='undefined'){
            for (let i=0;i > arr.datas.length;i++){
              console.log()
            }
          }
        }
      })
    }

    const RemindChange = () => {
      RemindCheck(token).then(res => {
        if (res.ret == 200) {
          isremind.value = 0
          return isremind.value
        } else {
          console.log(res.msg)
        }
      })
    }


    const format = (percentage) => {
      return percentage === 100 ? 'Full' : `${percentage}`
    }
    const drawChart = () => {
      // 基于准备好的dom，初始化echarts实例
      let chart = echarts.init(document.getElementById("chart"));
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        chart.resize();
      });
      const data1 = [
        1,
        2,
        3,
        4,
        5,
        6,
        7
      ]
      chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#7FA8FA"
            }
          }
        },
        legend: {
          data: ["邮件营销"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: dayData.value,
            splitLine: {
              //去除网格线
              show: false
            },
            splitArea: { show: false },
            //去除网格区域
            axisLine: {
              show: false // 隐藏x轴轴线
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: false
          }
        ],
        series: [
          {
            name: "访问量",
            type: "line",
            stack: "总量",
            emphasis: {
              focus: "series"
            },
            smooth: true, //是否用曲线显示
            symbol: "circle", //折线节点为小圆点
            symbolSize: "8", //折线点大小
            itemStyle: {
              borderColor: "#7FA8FA", //折线点边框色，这里我函数调用了。大家直接换成自己要的颜色
              color: "#FFFFFF"
            },
            lineStyle: {
              color: "#7FA8FA"
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0077f3" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E8F5FD"
                    }
                  ]
                ) //背景渐变色
              }
            },
            data: countData
          }
        ]
      });
    };
    /**
     * 分享数据 饼图
     */
    const hrightChart = () => {
      // 基于准备好的dom，初始化echarts实例
      let chart = echarts.init(document.getElementById("head-right"));
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}: {c} ({d}%)"
        },
        color: ["#7FA8FA", "#8685E8", "#FB8B79"],
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "left",
          y: "center",
          itemGap: 30,
          textStyle: {
            rich: {
              0: {
                padding: [6, 0, 6, 0]
              },
              1: {
                color: "#111111",
                fontSize: 32,
                fontWeight: 700
              }
            }
          },
          formatter: function (val) {
            let ar = JSON.stringify(state.data1)
            let legendData = JSON.parse(ar);
            var index = 0;
            legendData.forEach(function (v, i) {
              if (v.name == val) {
                  index = i;
              }
            });
            return val + "      " + legendData[index].value;
          }
        },
        series: [
          {
            center: ["70%", "50%"],
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              // 饼图图形上的文本标签
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold"
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: state.data1
          }
        ]
      });
    };
    const tabAvt = function () {
      //console.log("切换筛选折线图");
    };
    const current = (e) => {
      if (e === state.page) {
        return false
      }
      state.page = e
      getMessage()
    }
    onMounted(async () => {
      await drawChart();
      await hrightChart();
      await countusers();
      await gettotaltask();
    });
    return {
      checkData,
      missData,
      isremind,
      progressData,
      dayData,
      countData,
      count,
      drawChart,
      state,
      current,
      tabAvt,
      format,
      CountUsers,
      GetTotalTask,
      RemindChange,
      total_task
    };

  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.total-share {
  margin-top: 20px;
  text-align: left;
  margin-bottom: 11px;
  margin-left: 5px;
  .title {
    color: #444444;
    font-weight: bold;
    font-size: 12px;
  }
  .number {
    color: #1481ff;
    font-weight: bold;
  }
}
.fnt {
  color: #4c84ff;
  font-weight: 600;
  margin-left: 10px;
  font-size: 17px;
}
.chart {
  width: 60%;
  height: 260px;
}
.ritht {
  width: 100%;
  height: 270px;
  background: white;
  padding: 10px;
  border-radius: 15px;
  #head-right {
    height: 200px;
  }
}
.head {
  border-bottom: 1px solid #f9f5f5;
  display: flex;
  color: #111111;
  font-weight: bold;
  font-size: 14px;
  line-height: 32px;
  font-family: "element-icons" !important;
  .wf-left {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 20px 0px rgba(40, 92, 139, 0.18);
    background: white;
    width: 66%;
    margin-right: 20px;
    border-radius: 15px;
  }
  .left {
    color: #111111;
  }
  .right {
    margin-left: 100px;
  }
}
.titsle {
  position: absolute;
  left: 50px;
  top: 10px;
}
.dfix {
  display: flex;
}
.dth33 {
  min-height: 47px;
  margin-top: 20px;
  width: 100%;
  .k1 {
    background: #daeafe;
    border-radius: 8px;
    padding: 25px 15px 60px 15px;
  }
  .d1 {
    display: flex;
    .img1 {
      margin-right: 10px;
      .k1-im {
        width: 15px;
        height: 15px;
      }
    }
    .k1-str {
      font-size: 14px;
      font-weight: 600;
      margin-right: 15px;
      color: #1a1a1a;
    }
    .k1-num {
      color: #699afb;
      font-weight: 600;
      font-size: 15px;
    }
  }
  .jd {
    margin-top: 35px;
    .tit {
      font-size: 12px;
      color: #7a8499;
      margin-bottom: 5px;
    }
    .jdt {
      display: flex;
      justify-content: space-between;
      .dth {
        width: 86%;
      }
      .num1 {
        line-height: 5px;
        color: #7fa8fa;
      }
      .num2 {
        line-height: 5px;
        color: #8685e8;
      }
      .num3 {
        line-height: 5px;
        color: #fb8b79;
      }
    }
  }

  .k2 {
    background: #e8e2fc;
    border-radius: 8px;
    padding: 25px 15px 60px 15px;
  }
  .k3 {
    .b1 {
      background: white;
      padding: 25px;
      border-radius: 8px;
    }
    .tx-str1 {
      display: inline-block;
      width: 50%;
      color: #8a9099;
      font-size: 14px;
      margin-bottom: 30px;
    }
    .tx {
      margin-top: 40px;
    }
    .ma-num {
      margin-left: 10px;
      font-weight: 600;
    }
    .re-img {
      width: 25px;
      height: 30px;
    }

    .remind {
      margin-top: 16px;
      background: linear-gradient(266deg, #5b8dfc, #8cb2fd);
      box-shadow: 0px 0px 20px 0px rgb(63 113 224 / 50%);
      opacity: 0.5;
      border-radius: 8px;
      padding: 15px;
      display: flex;
      justify-content: center;

    }
    .remind1 {
      margin-top: 16px;
      background: linear-gradient(266deg, #0000ff, #4284ff);
      box-shadow: 0px 0px 20px 0px rgb(63 113 224 / 50%);
      opacity: 0.5;
      border-radius: 8px;
      padding: 15px;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .remind1:active {
      background: #667390;
    }
    .r-1 {
      line-height: 23px;
      margin-left: 10px;
      color: #ffffff;
      letter-spacing: 2px;
    }
  }
}
</style>
